import { createStore } from "@/vuex";

// 防抖
function debounce(func, wait) {
  let timeout;
  return () => {
    clearTimeout(timeout);
    timeout = setTimeout(function () {
      func();
    }, wait);
  };
}

// 持久化存储
function customPlugin(store) {
  const local = JSON.parse(localStorage.getItem("Vuex-State"));
  if (local) {
    store.replaceState(local);
  }
  // 每当状态发生变化的时候，会订阅
  store.subscribe((mutation, state) => {
    // 防抖
    debounce(
      () => localStorage.setItem("Vuex-State", JSON.stringify(state)),
      2000
    )();
  });
}

const store = createStore({
  // 严格模式
  strict: true,
  // 插件
  plugins: [customPlugin],
  // 组件的状态
  state: {
    rCount: 1,
  },
  // 计算属性
  getters: {
    rDouble(state) {
      return state.rCount * 2;
    },
  },
  // 同步更改的
  mutations: {
    add(state, payload) {
      state.rCount += payload;
    },
  },
  actions: {
    asyncAdd({ commit }, payload) {
      setTimeout(() => {
        commit("add", payload);
      }, 1000);
    },
  },
  modules: {
    aModule: {
      // 不加namespaced:true,默认为false,mutations和actions将不会有私有名，其它模块或主体中存在同名函数且被触发时，该模块下的同名函数也会被触发
      namespaced: true,
      state: {
        aCount: 1,
      },
      // 计算属性
      getters: {
        aDouble(state) {
          return state.aCount * 2;
        },
      },
      // 同步更改的
      mutations: {
        add(state, payload) {
          state.aCount += payload;
        },
      },
      actions: {
        asyncAdd({ commit }, payload) {
          setTimeout(() => {
            commit("aModule/add", payload);
          }, 1000);
        },
      },
      modules: {
        cModule: {
          // 不加namespaced:true,默认为false,mutations和actions将不会有私有名，其它模块或主体中存在同名函数且被触发时，该模块下的同名函数也会被触发
          namespaced: false,
          state: {
            cCount: 1,
          },
          // 计算属性
          getters: {
            cDouble(state) {
              return state.cCount * 2;
            },
          },
          // 同步更改的
          mutations: {
            add(state, payload) {
              state.cCount += payload;
            },
          },
          actions: {
            asyncAdd({ commit }, payload) {
              setTimeout(() => {
                commit("aModule/add", payload);
              }, 1000);
            },
          },
        },
      },
    },
    bModule: {
      namespaced: true,
      state: {
        bCount: 1,
      },
      // 计算属性
      getters: {
        bDouble(state) {
          return state.bCount * 2;
        },
      },
      // 同步更改的
      mutations: {
        add(state, payload) {
          state.bCount += payload;
        },
      },
      actions: {
        asyncAdd({ commit }, payload) {
          setTimeout(() => {
            commit("bModule/add", payload);
          }, 1000);
        },
      },
    },
  },
});

store.registerModule(["bModule", "dModule"], {
  namespaced: true,
  state: {
    dCount: 1,
  },
  getters: {
    dDouble(state) {
      return state.dCount * 2;
    },
  },
  mutations: {
    add(state, payload) {
      state.dCount += payload;
    },
  },
  actions: {
    asyncAdd({ commit }, payload) {
      setTimeout(() => {
        commit("bModule/dModule/add", payload);
      }, 1000);
    },
  },
});

export default store;
